<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="公司名称">
              <a-input placeholder="请输入公司名称" v-model="queryParam.companyName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" icon="search" @click="searchQuery">查询</a-button>

            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- table区域-begin -->
    <div>

      <a-table
        v-has="'company:default'"
        ref="table"
        size="small"
        :scroll="{x:800,y:350}"
        bordered
        rowKey="id"
        :pagination="ipagination"
        :columns="columns2"
        :dataSource="dataSource"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="defLock" slot-scope="text,record">
          <a-icon style="color: #faad14;font-size: 20px" v-if="record.isLock == 1" type="lock" />
          <a-icon style="font-size: 20px" v-else type="unlock" />
        </template>

      </a-table>

      <a-table
        v-has="'company:approved'"
        ref="table"
        size="small"
        :scroll="{x:800,y:350}"
        bordered
        rowKey="id"
        :columns="columns"
        :pagination="ipagination"
        :dataSource="dataSource"
        class="j-table-force-nowrap"
        @change="handleTableChange">

        <template slot="defLock" slot-scope="text,record">
          <a-popconfirm
            :title="record.isLock==1?'确定要解锁此费用?':'确定要锁定此费用?'"
            ok-text="确定"
            cancel-text="取消"
            @confirm="lock(record)"
          >
            <a-icon style="cursor:pointer;color: #faad14;font-size: 20px" v-if="record.isLock == 1" type="lock" />
            <a-icon style="cursor:pointer;font-size: 20px" v-else type="unlock" />
          </a-popconfirm>
        </template>

        <span slot="action" slot-scope="text, record">
            <a-popconfirm
              title="确定要撤销审核此费用？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="revoke(record)"
            >
              <a href="#">撤销审核</a>
            </a-popconfirm>
          <a-divider type="vertical" />
            <a-popconfirm
              title="确定要删除此费用？"
              ok-text="确定"
              cancel-text="取消"
              @confirm="() => handleDelete(record.id)"
            >
              <a href="#">删除</a>
            </a-popconfirm>


        </span>

      </a-table>
    </div>
    <company-data-modal ref="modalForm" @ok="modalFormOk"></company-data-modal>
  </a-card>
</template>

<script>

import { JeecgListMixin } from '@/mixins/JeecgListMixin'

import { httpAction, getAction, deleteAction, postAction } from '@/api/manage'
import '@/assets/less/TableExpand.less'
import { mixinDevice } from '@/utils/mixin'

import CompanyDataModal from './modules/CompanyDataModal'
export default {
  name: 'CompanyDataList',
  mixins: [JeecgListMixin, mixinDevice],
  components: {

    CompanyDataModal
  },
  data() {
    return {
      description: '公司信息数据库管理页面',
      dataSource: [],
      // 表头
      columns: [
        {
          title: '公司名称',
          align: 'left',
          width: 280,
          dataIndex: 'companyName'
        },
        {
          title: '开票信息',
          align: 'left',
          colSpan: 2,
          ellipsis: true,
          width: 300,
          dataIndex: 'billingInfoOne'
        },
        {
          title: '开票数量',
          align: 'center',
          colSpan: 0,
          width: 50,
          dataIndex: 'billingInfoNumber',
          customRender: (value, row, index) => {
            let count = 0
            if (row.billingInfoOne) {
              count = count + 1
            }
            if (row.billingInfoTwo) {
              count = count + 1
            }
            if (row.billingInfoThree) {
              count = count + 1
            }
            // return count + '条'
            let allNum = count + '条';
            const show =()=>{

              this.showdetail(row);  //调用method里面的方法
            }
            return <span style="cursor:pointer" onClick={show}><u>{allNum}</u></span>
          }
        },
        {
          title: '提交人',
          align: 'center',
          width: 150,
          dataIndex: 'submitter'
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 200,
          scopedSlots: { customRender: 'action' }
        },
        {
          title: '锁定',
          dataIndex: 'lock',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'defLock' }
        }
      ],
      // 表头
      columns2: [
        {
          title: '公司名称',
          align: 'lfet',
          width: 280,
          dataIndex: 'companyName'
        },
        {
          title: '开票信息',
          align: 'left',
          colSpan: 2,
          ellipsis: true,
          width: 300,
          dataIndex: 'billingInfoOne'
        },
        {
          title: '开票数量',
          align: 'center',
          colSpan: 0,
          width: 50,
          dataIndex: 'billingInfoNumber',
          customRender: (value, row, index) => {
            let count = 0
            if (row.billingInfoOne) {
              count = count + 1
            }
            if (row.billingInfoTwo) {
              count = count + 1
            }
            if (row.billingInfoThree) {
              count = count + 1
            }
            // return count + '条'
            let allNum = count + '条';
            const show =()=>{

              this.showdetail(row);  //调用method里面的方法
            }
            return <span style="cursor:pointer" onClick={show}><u>{allNum}</u></span>
          }
        },
        {
          title: '提交人',
          align: 'center',
          width: 150,
          dataIndex: 'submitter'
        },
        {
          title: '锁定',
          dataIndex: 'lock',
          align: 'center',
          width: 80,
          scopedSlots: { customRender: 'defLock' }
        }
      ],
      url: {
        list: '/companydata/list',
        delete: '/companydata/delete',
        revoke: '/companydata/revoke',
        lock: '/companydata/lock',
        deleteBatch: '/companydata/deleteBatch',
        exportXlsUrl: '/companydata/exportXls',
        importExcelUrl: 'companydata/importExcel'

      },
      dictOptions: {}
    }
  },
  created() {
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    revoke(record) {
      let param = {
        id: record.id
      }
      httpAction(this.url.revoke, param, 'post').then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        // that.confirmLoading = false
      })
    },
    del(record) {
      let param = {
        ids: record.id.toString()
      }
      deleteAction(this.url.delete, param).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
      })
    },
    lock(record) {
      let param = {
        id: record.id.toString(),
        type: record.isLock == 1 ? 0 : 1
      }
      postAction(this.url.lock, param).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData(1)
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
      })
    },
    showdetail(val){
      this.handleDetail(val)

    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>